const {src, dest ,series ,watch } = require('gulp');
//plugins.uglify() => plugins.uglify = require('gulp-uglify')
const plugins = require('gulp-load-plugins')();//神奇的gulp插件
const del = require('del');
const browserSync = require('browser-sync').create()
const reload = browserSync.reload;

//压缩js
function js(cb){
    src('js/*.js')
        .pipe(plugins.uglify())
        .pipe(dest('./dist/js'))
        .pipe(reload({stream:true}))
    //告诉gulp主进程任务执行完成
    cb()
}
//server任务
function server(cb){
    browserSync.init(({
        server:{
            baseDir:'./'
        }
    }))
    cb()
}
//对sass，less预编译
function css(cb){
    src('css/*.scss')
        .pipe(plugins.sass({outputStyle:'compressed'}))
        .pipe(plugins.autoprefixer({
            cascade:false,
            remove:false
        }))
        .pipe(dest('./dist/css'))
        .pipe(reload({stream:true}))
    console.log("css task")
    cb();
}
//监听文件变化
function watcher(){
    watch('js/*.js',js)
    watch('css/*.scss',css)
}
//清除dist目录
function clean(cb){
    del('./dist')
    cb()
}
exports.scripts = js;
exports.styles = css;
exports.clean = clean;
exports.default = series(
    [
        clean,
        js,
        css,
        server,
        watcher
    ]
)